<template>
    <div class="fan-and-solenoid">
        <div class="fan-and-solenoid-content">
            <div class="fan-and-solenoid-item" v-for="(item, index) in fanList" :key="item.id">
                <el-card class="fan-and-solenoid-item-card" :body-style="{ padding: '10px' }">
                    <div class="fan-and-solenoid-item-card-body">
                        <div class="fan-and-solenoid-item-card-info">
                            <div class="fan-and-solenoid-item-card-device-name">
                                <text class="value">{{ item.fanNo }}</text>
                            </div>
                            <div class="fan-and-solenoid-item-card-location">
                                <text>{{ item.blName }}{{ item.flCode }}{{ item.rmName }}</text>
                            </div>
                        </div>
                        <div class="switch-container">
                            <el-switch v-if="item.fanNo.includes('电磁阀')" :active-value="1" :inactive-value="0"
                                @change="switch1Change(item, $event)" />
                            <el-switch v-else v-model="item.state" :active-value="0" :inactive-value="1"
                                @change="switch1Change(item, $event)" />
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getFanDeveiceList, changeFanStatus } from '@/api/bigScreen/bigScreen.api'
import { onMounted, ref } from 'vue'

interface fanDevice {
    id: number;
    fanNo: string;
    blId: string;
    blCode: string;
    blName: string;
    createTime: string | null;
    flCode: string;
    flId: string;
    flName: string;
    installTime: string;
    ipAddress: string;
    registerAddress: string;
    rmCode: string;
    rmId: string;
    rmName: string;
    state: number;
    deviceName?: string;
}

const fanList = ref<fanDevice[]>([])
async function getFanList() {
    try {
        const res = await getFanDeveiceList()
        if (res.code === 200) {
            fanList.value = res.result.records
        }
    } catch (error) {
        if (error instanceof Error) {
            ElMessage.error(error.message)
        }
    }
}

onMounted(() => {
    getFanList()
})

// 定义开关事件的类型
type SwitchChangeEvent = number
// 开关切换事件
const switch1Change = async (formData: fanDevice, e: SwitchChangeEvent) => {
    // 记录当前状态，以便在出现错误时恢复
    const originalState = formData.state;
    const aimState = e;
    formData.state = aimState
    try {
        let res = await changeFanStatus(formData)
        if (res.code === 200) {
            getFanList()
        } else {
            // 让switch开关弹回关闭
            formData.state = originalState;
            ElNotification({
                title: '开启失败',
                message: '',
                type: 'error',
            })
        }
    } catch (error) {
        if (error instanceof Error) {
            ElNotification({
                title: '开启失败',
                message: `${error.message}`,
                type: 'error',
            })
        }
    }
}

// 开关切换事件
// const switch2Change = async (formData: fanDevice, e: SwitchChangeEvent) => {
//     // 记录当前状态，以便在出现错误时恢复
//     const originalState = formData.state;
//     const aimState = e ? 0 : 1;
//     formData.state = aimState
//     try {
//         let res = await changeFanStatus(formData)
//         if (res.result.openResult) {

//         } else {
//             // 让switch开关弹回关闭
//             formData.state = originalState;
//             ElNotification({
//                 title: '开启失败',
//                 message: '',
//                 type: 'error',
//             })
//         }
//     } catch (error) {
//         if (error instanceof Error) {
//             ElNotification({
//                 title: '开启失败',
//                 message: `${error.message}`,
//                 type: 'error',
//             })
//         }
//     }
// }
</script>

<style lang="scss" scoped>
.fan-and-solenoid {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 1px;

    .fan-and-solenoid-content {
        height: 100%;
        width: 100%;
        border: 3px solid #ccc;
        border-radius: 15px;
        padding: 0.5rem;

        overflow-y: scroll;
        max-height: 100%;

        &::-webkit-scrollbar {
            display: none;
        }

        .fan-and-solenoid-item {
            margin: 5px 0;

            .fan-and-solenoid-item-card {
                background-color: transparent;

                .fan-and-solenoid-item-card-body {
                    display: flex;
                    justify-content: space-between;

                    .fan-and-solenoid-item-card-info {
                        color: #fff;
                        font-size: 12px;
                        margin-right: 5px;
                        font-weight: bolder;
                        text-align: left;
                    }

                    .switch-container {}
                }

            }
        }
    }
}
</style>